<template>
	<view class="header-wrapper">
		<view class="content-wrapper">
			<view class="start" :style="{height:(getStatusBarHeight() + 8)  + 'px'}"></view>
			<view class="box" :style="{height:getTitleBarHeight()+'px',marginLeft:getLeftIconLeft()+'px'}">
				<view class="name">{{title}}</view>
				<view class="search-wrapper">
					<uni-icons class="left-icon" color="#a7a7a7" type="search" size="22"></uni-icons>
					<text class="font">搜索</text>
				</view>
			</view>

		</view>
		<view class="file" :style="{height:getNavBarHeight()+'px'}"></view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {getStatusBarHeight,getTitleBarHeight,getNavBarHeight,getLeftIconLeft} from "@/utils/system.js"
defineProps({
	title:{
		type:String,
		default:''
	}
})
</script>

<style lang="scss" scoped>
.header-wrapper{
	:deep(){
		.uni-icons{
			color:  $text-font-color-3 !important;
		}
	}
	.content-wrapper{
		width: 100%;
		padding: 0 30rpx;
		position: fixed;
		top: 0;
		z-index: 99;
		background: linear-gradient(to bottom,transparent,#fff 400rpx),linear-gradient(to right,#beecd8 20%,#F4E2D8);
		.box{
			display: flex;
			.name{
				font-size: 40rpx;
				color: $text-font-color-1;
				margin-right: 30rpx;
			}
			.search-wrapper{
				display: flex;
				align-items: center;
				padding: 0 10rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				width: 230rpx;
				 height: 50rpx;
				border: 1rpx solid #fff;
				background: rgba(255, 255, 255, 0.3);
				color:  $text-font-color-3;
				.left-icon{
					margin-right: 5rpx;
				}
				.font{
					font-size: 26rpx;
				}
			}
		}

	}
}
</style>